<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="images/icon.jpg">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/common.css">
    <style rel="stylesheet">
        .container-fluid .row .media{
            padding:20px;
            margin-top:20px;
            border-top: 1px solid #99a2aa;
        }
        .media .media-left a img{
            width: 64px;
            height: 64px;
        }
        .media .media-heading p .nickname{
            font-size: 18px;
            font-weight: bold;
        }
        .progress .progress-bar{

            background-color: #ff905a;
        }
        .progress{
            overflow: visible;
            position: relative;
            width: 300px;
            height: 25px
        }
        .progress .progress-bar .exp{
            color: black;
            position: absolute;
            right: -70px;
        }
        .progress .progress-bar .level{
            left: 10px;
            position: absolute;
            font-weight: 700;
        }

    </style>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/index.html" class="navbar-brand logo">
                <img src="/images/icon.jpg" width="50px" alt="">
            </a>
            <a class="navbar-brand" href="/index.html">
                <span>义启行</span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/index.html">首页<span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/discussion.html">讨论</a></li>
                <li class="publish"><a href="/publish.html">分享</a></li>
                <li><a href="/recruit.html" class="recruitTab" style="display: none;">发布招募</a></li>
                <li class="authTab"><a href="/login.html">登录</a></li>
                <li class="authTab"><a href="/register.html">注册</a></li>
                <li class="dropdown user" style="display: none">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <span>
                            <span>
                                <img class="avatarUrl img-circle" src="/images/adorable.jpg" alt="">
                            </span>
                            <span class="nickname"></span>
                        </span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <input type="hidden" value="-1" class="role">
                        <li><a href="/personal.html">个人信息</a></li>
                        <li><a href="/replies.html">回复我的</a></li>
                        <li><a href="/signupInfo.html">报名信息</a></li>
                        <li><a href="/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <ul class="nav nav-pills nav-justified">
                <li role="presentation" class="personalInfo active" ><a href="/personal.html">个人信息</a></li>
                <li role="presentation" class="replies"><a href="/replies.html">回复我的</a></li>
                <li role="presentation"><a href="/signupInfo.html">报名信息</a></li>
            </ul>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object avatarUrl img-circle" src="/images/twilight.jpeg" alt="...">
                        <a href="javascript:uplaodAvatar()">修改头像</a>
                        <form action="/file/uploadAvatar" enctype="multipart/form-data" method="post" style="display: none">
                            <input type="file" id="avatarImage" name="imageFile">
                            <input type="submit" id="submitImage">
                        </form>
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">
                        <p>
                            <span class="nickname">Liyuan</span>
                            <span class="role tab">普通用户</span>
                        </p>
                    </h4>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            <span class="exp">6905/10800</span>
                            <span class="level">Lv3</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <form action="/savePersonalInfo" method="post">
                <input type="hidden" id="userId" name="id" value="-1">
                <input type="hidden" class="account" name="account">
<!--                account-->
                <div class="form-group">
                    <label for="Account_">账号：</label>
                    <input type="text" id="Account_" class="form-control account" value="1987151116@qq.com" disabled>
                </div>
<!--                description-->
                <div class="form-group">
                    <label for="nickname">昵称：</label>
                    <input type="text" name="nickname" class="form-control nickname" id="nickname" value="Liyuan" style="width: 300px;">
                </div>
                <div class="form-group">
                    <label for="description">我的签名：</label>
                    <textarea name="description" id="description" class="form-control"  rows="5">
                    </textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="form-control">保存</button>
                </div>
            </form>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>
</body>
<script src="/js/personal.js"></script>
<script>
    $("#avatarImage").change(function () {
        var chooseFile = $(this)[0].files[0];
        var type = chooseFile.name.substring(chooseFile.name.lastIndexOf(".") + 1);
        type = type.toLowerCase();
        // debugger
        if (type === "jpg" || type === "png" || type === "JPG" || type === "jepg" || type === "gif" || type === "bmp" || type === "webp") {
            var reader = new FileReader();
            reader.readAsDataURL(chooseFile);
            reader.onload = function () {
                $(".avatar_url").attr("src", this.result);
                $("#submitImage").click();
            };
        } else {
            alert("头像格式不对，请重新选择！");
            return false;
        }
    });
</script>
<script>
    retrievePersonalInfo();
</script>
<script src="/js/common.js"></script>
<script>authenticate()</script>

</html>